<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>车费支付</title>
		<!--标准mui.css，公共样式-->
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/iconfont/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="../css/public.css"/>
		<!--定义样式-->
		<link rel="stylesheet" type="text/css" href="../css/order.css"/>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=A8773a52f6d9bc0ecaea7f15acdd13e0"></script>	
		<style type="text/css">	
			body, html{overflow: inherit!important;}	
			body, html,#allmap {height: 100%;width: 100%;top:-1px;margin:0;font-family:"微软雅黑";background: white;}
			.heights{opacity: 0;}
			.pay{color: #2AC845; margin-top: 44px!important;text-align: center; background: #fff;height: 25px!important;line-height: 25px!important; width: 100%!important;border-bottom: 1px solid #ddd;margin-bottom: 0;}
			.mui-bar{background: #fff; box-shadow: none;}	
			/*总计*/
			.mui-mid{text-align: center;width: 100%;}
			.mui-mid h3{font-size: 16px;color: black;}
			.mui-mid h3 strong{font-size: 34px;padding: 0 6px;}
			.mui-mid h3 span{color: #ff9000;font-size: 14px;padding-left: 2%;}
			/*支付*/
			.pay_fanshi label{padding: 5px 15px;}
			.pay_fanshi label i{padding-right: 10px;}
			.mui-navigate-right:after, .mui-push-right:after {text-align: center;width: 100%;right: 0;font-size: 35px;color: #30a84e;}
			.pay-active{display: none;}			
			.mui-radio input[type=radio]:checked:before {content: '\e442';}
			.mui-checkbox input[type=checkbox]:checked:before, .mui-radio input[type=radio]:checked:before {color: green;}
		</style>
	</head>
 
	<body ng-app="drive">
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left color6"></a>
			<h1 class="mui-title">支付车费</h1>
		</header>
		<h4 class="mui-icon iconfont icon-icon-shanghua pay"></h4>
		<!--支付车费start-->
        <div class="p_tb11_lr15 bg_white pay-active" style="display: block;" ng-controller="myCtrl" ng-cloak>
			<div class="mui-clearfix p_tb10 pos_re">
				<a class="mui-pull-left">
					<!--<p class="user_pic b1 circle60"></p>--><!--没有图片的时候显示-->
					<img src="../public/images/user2.jpg" class="circle60 b1"/>
				</a>
				<div class="mui-pull-left p_l10">
					<div class='store-star'>
						<span>赵师傅</span>
						<div class='star-outer'>
							<div class='star-inner' data-level='4'></div>
						</div>
					</div>
					<p class="color3 m_t16">手机号：<span id="phone_num">12345678900</span></p>
				</div>
				<button id="call_btn" disabled >
					<a class="colorP" href="tel:12345678900">
						<i class="iconfont mui-icon font36 icon-service-phone"></i>
					</a>
				</button>	
			</div>
			<div class="text-cancel p_tb0_lr15">
				<div class="mui-card-footer">
					<h4>车费详情</h4>
					<div class="mui-mid">
				    	<h3>总计<strong>64.0</strong>元<span>(包含小费)</span></h3>
				    </div>
				</div>
		    	<p class="mui-clearfix lh30 p_lr8 font16 color3"><span class="mui-pull-left">起步价  （ 5公里 )</span> <span class="mui-pull-right">18.0元</p>
		    	<p class="mui-clearfix lh30 p_lr8 font16 color3"><span class="mui-pull-left">远程接驾费</span> <span class="mui-pull-right">6.0元</span></p>
		    	<p class="mui-clearfix lh30 p_lr8 font16 color3"><span class="mui-pull-left">等待时长30分钟</span> <span class="mui-pull-right">20.0元</span></p>
		    	<p class="mui-clearfix lh30 p_lr8 font16 color3"><span class="mui-pull-left">小费</span> <span class="mui-pull-right">20.0元</span></p>					
		   	</div>
		   	<div class="p_lr4 pay_fanshi">
				<!--<div class="mui-input-row mui-radio">
				    <label><i class="iconfont mui-icon colorP font22 icon-weixinzhifu"></i>微信支付</label>
				    <input name="radio" type="radio" value="0">
				</div>
				<div class="mui-input-row mui-radio">
				    <label><i class="iconfont mui-icon color_blue font22 icon-zhifubaozhifu"></i>支付宝支付</label>
				    <input name="radio" type="radio" value="1">
				</div>					-->
				<button type="button" class="mui-btn mui-btn-green w100 font16 bg_green b_r8 p_tb11_lr15 m_t10" onclick="fukuan(2017061410299514,0.01)">线上支付</button>
		   		<button type="button" class="mui-btn mui-btn-warning w100 font16 bg_warning b_r8 p_tb11_lr15 m_t10" onclick="tool.openNewPage('order_comment_finish.html')">现金支付</button>			   		
			</div>			    
		</div>
		<!--支付车费end-->	
		<div id="allmap"></div>
	</body>

</html>
<!-- Mui core JavaScript-->
<script type="text/javascript" src="../js/mui.min.js"></script>
<script type="text/javascript" src="../js/appconfig.js"></script>
<script type="text/javascript" src="../js/jquery-2.2.4.min.js"></script>
<script src="../js/angular1.2.0.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/app/order_pay_fare.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">	
	// 百度地图API功能
	var map = new BMap.Map("allmap");
	map.centerAndZoom(new BMap.Point(113.837, 22.745), 15);

	var myP1 = new BMap.Point(113.837, 22.745); //起点
	var myP2 = new BMap.Point(113.837, 22.855); //终点
	var myIcon = new BMap.Icon("../public/cache/car.png", new BMap.Size(32, 70), { //小车图片
		//offset: new BMap.Size(0, -5),    //相当于CSS精灵
		imageOffset: new BMap.Size(0, 0) //图片的偏移量。为了是图片底部中心对准坐标点。

	});
	var myIcon1 = new BMap.Icon("../public/cache/2.png", new BMap.Size(42, 70));
	var myIcon2 = new BMap.Icon("../public/cache/3.png", new BMap.Size(32, 70));
	var driving2 = new BMap.DrivingRoute(map, {
		renderOptions: {
			map: map,
			autoViewport: true
		}
	}); //驾车实例
	driving2.search(myP1, myP2); //显示一条公交线路

	window.run = function() {
		var driving = new BMap.DrivingRoute(map); //驾车实例
		driving.search(myP1, myP2);
		driving.setSearchCompleteCallback(function() {
			var pts = driving.getResults().getPlan(0).getRoute(0).getPath(); //通过驾车实例，获得一系列点的数组
			var paths = pts.length; //获得有几个点

			var carMk = new BMap.Marker(pts[0], {
				icon: myIcon
			});
			map.addOverlay(carMk);
			i = 0;

			function resetMkPoint(i) {
				carMk.setPosition(pts[i]);
				if(i < paths) {
					setTimeout(function() {
						i++;
						resetMkPoint(i);
					}, 100);
				}
			}
			setTimeout(function() {
				resetMkPoint(5);
			}, 100)

		});
	}

	setTimeout(function() {
		run();
	}, 1500);
	
</script>
<script type="text/javascript">
	var s = 0;
	$(document).ready(function() {
		
			//获取下拉列表的高度
		$(".pay-active").css({'height':$(window).innerHeight()- $('.pay').innerHeight() - $('header').innerHeight(),'overflow-y': 'auto'});
		$('.pay').on('tap', function() {			
			$('.pay').hasClass('icon-icon-shanghua') ? $('.pay').removeClass('icon-icon-shanghua') : $('.pay').addClass('icon-icon-shanghua');
			$('.pay').hasClass('icon-iconxiahua') ? $('.pay').removeClass('icon-iconxiahua') : $('.pay').addClass('icon-iconxiahua');
			$('#allmap').hasClass('heights') ? $('#allmap').removeClass('heights') : $('#allmap').addClass('heights');
			if(s % 2 == 0) {
				$(".pay-active").css('display','none');
				$('#allmap').removeClass('heights');
				s++;
			} else {
				$(".pay-active").css('display','block');
				s--;
			}
		});
	});
	
	var app = angular.module('drive',['ng']);
	    app.controller('myCtrl', function ($scope,$http) {
		    $scope.myVar = true;
		    $scope.toggle = function() {
		    	$scope.myVar = !$scope.myVar;
	 			$scope.myTar = true;
		    }
	    })	
	
	tool.calculateStarWidth();//计算等级星星的宽度
</script>	